<template>
  <div class="commentItem">
    <div class="comment-img">
      <img
        :src="`${commentItem.user.avatarUrl}?imageView=1&type=webp&thumbnail=61x0`"
        alt=""
      />
    </div>
    <div class="comment-detail">
      <div class="cd-first">
        <div class="cdf-left">
          <div class="my-text user-name">{{ commentItem.user.nickname }}</div>
          <div class="my-text create-time">
            {{ commentItem.timeStr | timeFilter }}
          </div>
        </div>
        <div class="cdf-right">
          <span>{{ commentItem.likedCount | commentCountFilter }}</span>
          <svg
            class="cdfr-img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 28 28"
          >
            <path
              fill="#999"
              d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"
            ></path>
          </svg>
        </div>
      </div>
      <div class="cd-comment">
        {{ commentItem.content }}
      </div>
      <div class="cd-commentLink" v-if="commentItem?.beReplied.length">
        <span></span>
        <span>{{ commentItem?.beReplied[0]?.content }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentComponent",
  props: {
    commentItem: {
      type: Object,
      default: null,
    },
  },
  filters: {
    timeFilter(val) {
      let arr = val.split("-");
      return arr.length == 2
        ? `${arr[0]}月${arr[1]}日`
        : arr.length == 3
        ? `${arr[0]}年${arr[1]}月${arr[2]}日`
        : "";
    },
    commentCountFilter(val) {
      return val > 10000 ? (val / 10000).toFixed(1) + "万" : val;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.commentItem {
  color: #000;
  width: 100%;
  padding-top: 0.1rem;
  box-sizing: border-box;
  display: flex;
  .comment-img {
    min-width: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 0.1rem;
  }
  .comment-detail {
    width: calc(100vw - 0.5rem);
    box-sizing: border-box;
    padding: 0 0.1rem 0.11rem 0;
    border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.3);
    .cd-first {
      width: 100%;
      display: flex;
      .cdf-left {
        flex-grow: 1;
        overflow: hidden;
        .user-name {
          font-size: 0.14rem;
          color: #666;
        }
        .create-time {
          font-size: 0.12rem;
          color: #999;
        }
      }
      .cdf-right {
        font-size: 0.12rem;
        color: #999;
        display: flex;
        height: 0.18rem;
        line-height: 0.18rem;
        margin-left: 0.05rem;
        .cdfr-img {
          width: 0.14rem;
          height: 0.14rem;
          margin-left: 0.05rem;
        }
      }
    }
    .cd-comment {
      font-size: 0.15rem;
      color: #333;
      margin-top: 0.05rem;
    }
    .cd-commentLink {
      width: 100%;
      box-sizing: border-box;
      padding: 0.1rem;
      margin: 0.05rem 0;
      font-size: 0.14rem;
      color: #888;
      border: 0.01rem solid rgba($color: #ccc, $alpha: 0.3);
    }
  }
}
</style>